<template>
  <div class="step-from">
    <Steps :current="current">
        <Step title="填写转账信"></Step>
        <Step title="确认转账信息"></Step>
        <Step title="完成"></Step>
    </Steps>
    <div class="step-from-content">
      <template v-if="current===0">
        <Form :model="formItem" :label-width="80">
            <FormItem label="付款帐号">
                <Input v-model="formItem.input" placeholder="请输入付款帐号"></Input>
            </FormItem>
            <FormItem label="收款帐号">
                <Input v-model="formItem.select" placeholder="请输入收款帐号">
                  <Select v-model="formItem.select3" slot="prepend" style="width: 80px">
                      <Option value="支付宝">支付宝</Option>
                      <Option value="银行账户">银行账户</Option>
                  </Select>
               </Input>
            </FormItem>
            <FormItem label="收款人姓名">
                <Input v-model="formItem.input" placeholder="请输入收款人姓名"></Input>
            </FormItem>
            <FormItem label="转账金额">
                <Input v-model="formItem.input" placeholder="请输入转账金额">
                  <span slot="prepend">￥</span>
                </Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="next">下一步</Button>
            </FormItem>
          </Form>
      </template>

      <template v-if="current===1">
        <Form :model="formItem" :label-width="80">
            <FormItem label="付款帐号">
              ant-design@alipay.com
            </FormItem>
            <FormItem label="付款帐号">
              test@example.com
            </FormItem>
            <FormItem label="收款人姓名">
              Alex
            </FormItem>
            <FormItem label="转账金额">
                34（叁拾肆元整）
            </FormItem>
            <FormItem label="支付密码">
                <Input v-model="formItem.input" placeholder="请输入支付密码"></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="next">提交</Button>
                <Button type="info" @click="current = current - 1">上一步</Button>
            </FormItem>
          </Form>
      </template>

      <template v-if="current===2">
        <div>成功</div>
        <Button type="primary" @click="next">再转一笔</Button>
      </template>
    </div>
    <div class="step-from-footer">
      <h3>说明</h3>
      <h4>转账到支付宝账户</h4>
      <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
      <h4>转账到银行卡</h4>
      <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
    </div>
  </div>
</template>
<script>
    export default {
        data () {
            return {
                current: 0,
                formItem: {
                    input: '',
                    select3:'支付宝',
                    select: '',
                }
            }
        },
        methods: {
            next () {
                if (this.current == 2) {
                    this.current = 0;
                } else {
                    this.current += 1;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
  .step-from {
    margin:10px 10px 0;
    background: #fff;
    padding: 20px;
    &-content {
      width:500px;
      margin:50px auto;
    }
    &-footer {
      border-top:1px solid #efefef;
      width:100%;
      height:200px;
      padding: 0 56px;
      color: gray;
      h3 {
        font-size: 16px;
        margin: 0 0 12px 0;
        color: gray;
        line-height: 32px;
      }
      h4 {
        margin: 0 0 4px 0;
        color: gray;
        font-size: 14px;
        line-height: 22px;
      }
      p {
        margin-top: 0;
        margin-bottom: 12px;
        line-height: 22px;
      }
    }
  }
</style>



